/**
  * 显示一个侧边栏区域
  1. 头像区域
  2. 导航区域
  3. 外联区域
  4. 备案区域
 */

<template>
  <div class="SiteAside-content" v-loading="loading">
    <div v-if="loading">
      <!-- 头像区域 -->
      <div class="header">
        <Author :src="data.avatar" :size="150" />
      </div>
      <h1>{{ data.siteTitle }}</h1>
      <!-- 菜单区域 -->
      <div class="menus">
        <Menu />
      </div>

      <!-- 外链接区域 -->
      <div class="link">
        <Contact />
      </div>

      <!-- 备案区域 -->
      <div class="record">{{ data.icp }}</div>
    </div>
  </div>
</template>

<script>
import Author from "@/components/Author";
import Menu from "./Menu";
import Contact from "./Contact";
import { mapState } from "vuex";
export default {
  components: {
    Author,
    Menu,
    Contact,
  },
  computed: {
    ...mapState("setting", ["loading", "data"]),
  },
};
</script>

<style lang="less" scoped>
@import url(~@/style/var.less);
.SiteAside-content {
  position: relative;
  padding-top: 20px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  h1 {
    padding: 0;
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    margin: 10px auto;
  }
  .header {
    .Author-content {
      margin: 0 auto;
    }
  }
  .link {
    position: relative;
  }
  .record {
    margin-top: 30px;
    color: @gray;
    font-size: 12px;
    text-align: center;
  }
}
</style>